<template>
<div class="btn">
 <el-button type="primary" @click="down">下一页</el-button>
 <el-button type="primary" @click="up">上一页</el-button>
</div>
</template>
<script>
    export default {
        props:['list'],
        data(){
            return{
                dw:'',
                num:1,
                list1:''
            }
        },
        created(){
            this.list1=this.list
         // console.log(this.list1)
        },
        mounted(){
            this.list1=this.list
         localStorage.setItem('length',this.list1.length)
            
        },
        methods:{
            down(down){
                this.num++
                let pa=0
                let si=0
                if(this.num==0){
                    pa=0
                    si=10
                }else{
                    pa=this.num*10-10
                    si=pa+10
                }
               console.log(this.list1,'有没有值')
               let li=this.list1.slice(pa,si)
              // console.log(li.length,this.num,'num')
              //  this.$emit('down',pa,si)
                if(li.length>=10){
                   
                this.$emit('down', this.list1.slice(pa,si))
                // this.num++
               //  console.log(this.num)
                }else{
                   // console.log('为什么没有')
                   
                      pa=this.num*10-10
                    si=pa+10
                    this.$emit('down',this.list1.slice(pa,si))
                    return  this.num--
                     
                }
              // console.log(this.list1)
           //  this.num++
             //  console.log(this.dw,'子组件')
            },
            up(e){
             this.num--
                 let pa=0
                let si=0
                if(this.num<=1){
                    pa=0
                    si=10
                    this.num=1
                  return  this.$emit('up',this.list1.slice(pa,si))
                }else {
                    
                   // console.log(this.num,'下一页减减')
                    pa=this.num*10-10
                    si=pa+10
                    this.$emit('up',this.list1.slice(pa,si))
                }
                
               
               
            }
        },
        watch:{
            num(val){
              //  this.num=val
               console.log(val,'变化的值')
            },
            list(val){
              //  console.log(val,'最新的值吗')
                this.list1=val
            }
        }
        
    }
</script>
<style lang="less" scoped>
.btn{
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    .el-button{
        margin:0 100px;
    }
}
</style>